<template>
	<view class="content">
		<view class="cityheader">
			<view @click="cancel" class="city-cancel">取消</view>
			<view @click="confirm" class="city-true">确定</view>
		</view>
		<picker-view indicator-style="height: 50px;" style="width: 100%; height: 250px;" :value="value" @change="bindChange">
			<picker-view-column>
				<view v-for="(item,index) in provinces" :key="index" style="line-height: 50px; text-align: center;">
					{{item}}
				</view>
			</picker-view-column>
			<picker-view-column>
				<view v-for="(item,index) in citys" :key="index" style="line-height: 50px; text-align: center;">
					{{item}}
				</view>
			</picker-view-column>
			<picker-view-column>
				<view v-for="(item,index) in countys" :key="index" style="line-height: 50px; text-align: center;">
					{{item}}
				</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 组件的属性列表
			 */
			lists: {
				type: Array,
				default: () => {
					return []
				}
				// observer: function(newVal, oldVal) { // 监听默认值发生变化
				// 	this.setData({
				// 		list: newVal,
				// 	})
				// 	if (this.data.list.length) {
				// 		this.init(this.data.list)
				// 	}
				// }
			},
			idData: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				provinces: [],
				citys: [],
				countys: [],
				province: '',
				city: '',
				county: '',
				value: [0, 0, 0],
				values: [0, 0, 0],
				list: [],
			}
		},
		watch:{
			lists(e){
				this.list = e;
				this.init(e);
				console.log('城市列表数据：',e);
			}
		},
		created() {
			
		},
		methods: {
			// 初始化picker选择器
			init(list) {
				const {
					idData
				} = this
				let provinces = [],
					citys = [],
					countys = [],
					provinces_i = 0,
					citys_i = 0,
					country_i = 0
				if (idData.length) {
					provinces_i = list.findIndex(item => item.id == idData[0]);
					citys_i = list[provinces_i].children.findIndex(item => item.id == idData[1]);
					country_i = list[provinces_i].children[citys_i].children.findIndex(item => item.id == idData[2]);
				}
				list.map(item => {
					provinces.push(item.name)
				})
				list[provinces_i].children.map(item => {
					citys.push(item.name)
				})
				list[provinces_i].children[citys_i].children.map(item => {
					countys.push(item.name)
				})
				this.provinces = provinces;
				this.citys = citys;
				this.countys = countys;
				this.province = list[provinces_i].name;
				this.city = list[provinces_i].children[citys_i].name;
				this.county = list[provinces_i].children[citys_i].children[country_i].name;
				this.$nextTick(() => {
					this.value = [provinces_i, citys_i, country_i];
					this.values = [provinces_i, citys_i, country_i];
				})
			},

			// 根据下标获取省市区ID
			getId(index) {
				let list = this.list[index[0]],
					v1, v2, v3
				v1 = list.id
				if (list.children.length <= 0) return [v1, v2, v3]
				v2 = list.children[index[1]].id
				if (list.children[index[1]].children.length <= 0) return [v1, v2, v3]
				v3 = list.children[index[1]].children[index[2]].id
				return [v1, v2, v3]
			},

			// 滑动切换事件
			bindChange(e) {
				let val = e.detail.value,
					t = this.values,
					list = this.list
					console.log(t,'---',list);
				if (val[0] != t[0]) {
					let citys = [],
						countys = []
					list[val[0]].children.map(item => {
						citys.push(item.name)
					})
					list[val[0]].children[0].children.map(item => {
						countys.push(item.name)
					})
					this.province = this.provinces[val[0]];
					this.city = list[val[0]].children[0].name;
					this.citys = citys;
					this.county = list[val[0]].children[0].children[0].name;
					this.countys = countys;
					this.values = val;
					this.value = [val[0], 0, 0];
					return
				}
				if (val[1] != t[1]) {
					let countys = []
					list[val[0]].children[val[1]].children.map(item => {
						countys.push(item.name)
					})
					this.city = this.citys[val[1]];
					this.county = list[val[0]].children[val[1]].children[0].name;
					this.countys = countys;
					this.values = val;
					this.value = [val[0], val[1], 0];
					return
				}
				if (val[2] != t[2]) {
					this.county = this.countys[val[2]];
					this.values = val;
					return
				}
			},
			// 取消事件
			cancel() {
				this.$emit('onCancel',{
					name: `${this.province}/${this.city}/${this.county}`,
					id: this.getId(this.values)
				});
			},
			// 确定事件
			confirm() {
				let _this = this;
				_this.$emit('onConfirm',{
					name: `${_this.province}/${_this.city}/${_this.county}`,
					id: _this.getId(_this.values)
				});
			}
		}
	}
</script>

<style scoped>
	.cityheader{
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.cityheader .city-cancel {
		padding: 40rpx;
		color: #828282;
	}

	.cityheader .city-true {
		padding: 40rpx;
		color: #007cfa;
	}
</style>